<template>
  <div class="goodsinfo">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div
        class="ball"
        v-show="isShow"
        id="ball"
      >
      </div>

    </transition>

    <div class="my-panel">
      <mySwipe :lunbolist='lunbolist'></mySwipe>
    </div>

    <van-panel
      :title="goodsInfo.title"
      class="pan"
    >
      <div class="des">
        <div class="panle-body">
          <p class="price">
            <span class="old">市场价格:<s>{{goodsInfo.market_price}}</s></span>
            <span class="new">销售价格: {{goodsInfo.sell_price}}</span>
          </p>

          <p class="buyNumber">
            <span>购买数量:</span>
            <van-stepper v-model="value" />
          </p>

          <p class="buy">
            <van-button
              type="primary"
              class="nowBuy"
            >立即购买</van-button>
            <van-button
              type="danger"
              @click="addCart"
              :disabled="disabled"
            >加入购物车</van-button>
          </p>
        </div>
      </div>
    </van-panel>

    <van-panel
      title="商品信息"
      class="pan"
    >
      <div class="des">
        <div class="panle-body">
          <p class="price">
            商品货号：{{goodsInfo.goods_no}}
          </p>

          <p class="buyNumber">
            库存情况：{{goodsInfo.stock_quantity}}件
          </p>

          <p class="buy">
            上架时间：{{goodsInfo.add_time | datefmt}}
          </p>
        </div>
      </div>
    </van-panel>
  </div>
</template>
<script>
import MySwipe from '@/components/mySwipe'
export default {
  data: () => ({
    id: '',
    lunbolist: [],
    goodsInfo: {},
    value: 1,
    isShow: false,
    disabled: false
  }),
  created () {
    this.id = this.$route.params.id
    this.getLunbo()
    this.getinfo()
  },
  methods: {
    beforeEnter (el) {
      // 设置初始的位置
      el.style.transform = 'translate(0,0)'
    },
    enter (el, done) {
      var ball = document.querySelector('#ball').getBoundingClientRect()
      var info = document.querySelector('.van-info').getBoundingClientRect()
      var x = info.x - ball.x
      var y = info.y - ball.y
      // eslint-disable-next-line no-unused-expressions
      el.offsetLeft
      el.style.transform = `translate(${x}px,${y}px)`
      el.style.transition = 'all .5s ease'
      done()
    },
    afterEnter () {
      this.isShow = !this.isShow
    },
    async getLunbo () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/getthumimages/' + this.id)
      if (status !== 0) this.$Toast(message)
      this.lunbolist = message
      // console.log(message)
    },
    async getinfo () {
      const {
        data: { status, message }
      } = await this.$axios.get('api/goods/getinfo/' + this.id)
      if (status !== 0) this.$Toast(message)
      this.goodsInfo = message
      console.log(message)
    },
    addCart () {
      this.isShow = !this.isShow
      // 禁用点击按钮
      this.disabled = true
      setTimeout(() => {
        this.disabled = false
      }, 600)

      let goodsinfo = {
        count: this.value,
        id: this.$route.params.id,
        selected: true,
        sell_price: this.goodsInfo.sell_price,
        src: this.lunbolist[0].src,
        timer: null,
        title: this.goodsInfo.title
      }
      this.$store.dispatch('addCart', goodsinfo)
    }
  },
  components: {
    MySwipe
  }
}
</script>
<style lang="less" scoped>
.my-swipe {
  border: 1px solid #eee;
  margin: 10px;
  box-shadow: 0 0 4px #eee;
  border-radius: 10px;
}

.pan {
  margin: 0px 10px 10px 10px;
  box-shadow: 0 0 4px #eee;
  border: 1px solid #eee;
  border-radius: 10px;
  .van-cell__title {
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
  }
  .des {
    padding: 0px 16px;
    .price {
      font-size: 14px;
      color: #8f8f94;
      .old {
        margin-right: 10px;
      }
    }
    .buyNumber {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #8f8f94;
    }
    .buy {
      font-size: 14px;
      color: #8f8f94;
      .nowBuy {
        margin-right: 10px;
      }
    }

    .van-button {
      width: 78px;
      height: 30px;
      font-size: 12px;
      line-height: 30px;
    }
    .van-button--normal {
      padding: 0 6px;
    }
  }
  .van-cell:not(:last-child)::after {
    right: 16px;
  }
}

.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: 411px;
  left: 146px;
  z-index: 666;
}
</style>
